<template>
  <div class="full-width full-height row">
    <div class="col-4 video-container">
      <div id="player0" ref="player0" />
    </div>
    <div class="col-4 video-container">
      <div id="player1" ref="player1" />
    </div>
    <div class="col-4 video-container">
      <div id="player2" ref="player2" />
    </div>
    <div class="col-4 video-container">
      <div id="player3" ref="player3" />
    </div>
    <div class="col-4 video-container">
      <div id="player4" ref="player4" />
    </div>
    <div class="col-4 video-container">
      <div id="player5" ref="player5" />
    </div>
    <div class="col-4 video-container">
      <div id="player6" ref="player6" />
    </div>
    <div class="col-4 video-container">
      <div id="player7" ref="player7" />
    </div>
    <div class="col-4 video-container">
      <div id="player8" ref="player8" />
    </div>
    <!-- <Player
      v-for="user in users"
      :key="`${user.userID + Math.ceil(Math.random(0,1) *100)}`"
      :url="`${rtmpBaseUrl}${String(user.userID)}/${String(user.sceneID)}`"
      :playerState="user.status === 2 ? 'alarm' : user.status === 3 ? 'warning' : null"
      @playerClick="playerClick"
    /> -->

  </div>
</template>

<script>
import Player from './Player'
import VideoOperator from './VideoOperator'
import { dom } from 'quasar'
const { height, width } = dom
// import qs from 'qs'
export default {
  name: 'SmallPlayer',
  props: {
    urls: { type: Array, default: () => ([]) }
  },
  components: {Player, VideoOperator},
  data: () => ({
    rtmpBaseUrl: `rtmp://${window.location.host.split(':')[0]}/live/`,
    // rtmpBaseUrl: `rtmp://test2.goolton.com/live/`,
    playerList: {
      player0: null,
      player1: null,
      player2: null,
      player3: null,
      player4: null,
      player5: null,
      player6: null,
      player7: null,
      player8: null
    },
    playerConfig: {
      flashplayer: 'http://cdn.bdstatic.com/jwplayer/latest/cyberplayer.flash.swf',
      autostart: true,
      stretching: 'uniform',
      volume: 0,
      controls: false,
      rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
      },
      ak: '28c4f4cf125a461d81c76fa96d8b1422' // 公有云平台注册即可获得accessKey
    }
  }),
  watch: {
    urls: {
      handler () {
        this.setupPlayer()
      },
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    playerClick (event) {
      this.$emit('sendToMainPlayer', event)
    },
    setupPlayer () {
      const availabePlayers = [
        'player0',
        'player1',
        'player2',
        'player3',
        'player4',
        'player5',
        'player6',
        'player7',
        'player8'
      ]
      const remainedUrls = []
      this.urls.forEach((url, index) => {
        if (this.whichPlaying(url, availabePlayers) === -1) {
          remainedUrls.push({url, status: 2})
        }
      })
      if (remainedUrls.length > 0 && availabePlayers.length > 0) {
        availabePlayers.forEach((player, index) => {
          if (index < remainedUrls.length) {
            this.attachToPlayer(player, remainedUrls[index].url, remainedUrls[index].status)
            availabePlayers.splice(index, 1)
          } else {
            if (this.playerList[player]) this.playerList[player].remove()
          }
        })
      }
      availabePlayers.forEach((player, index) => {
        if (this.playerList[player]) this.playerList[player].remove()
      })
    },
    whichPlaying (url, availabePlayers) {
      let index = -1
      availabePlayers.every((player, i) => {
        if (this.playerList[player] && this.playerList[player].getPlaylistItem(0).file === url) {
          index = i
          availabePlayers.splice(index, 1)
          return false
        }
        return true
      })
      return index
    },
    attachToPlayer (player, url, status) {
      const playerConfig = Object.assign({}, this.playerConfig)
      playerConfig.file = url
      // playerConfig.file = `rtmp://live.hkstv.hk.lxdns.com/live/hks2`
      playerConfig.height = height(this.$refs[player].parentElement) - 10
      playerConfig.width = width(this.$refs[player].parentElement) - 10
      // console.log('TCL: attachToPlayer -> playerConfig', playerConfig)
      if (this.playerList[player]) {
        if (this.playerList[player].getPlaylistItem(0) && this.playerList[player].getPlaylistItem(0).file !== url) {
          this.playerList[player].setup(playerConfig)
        }
      } else {
        this.playerList[player] = window.cyberplayer(player).setup(playerConfig)
      }
      this.playerList[player].on('displayClick', () => {
        this.$emit('playerClick', url)
      })
      this.refreshPlayerState(player, status)
    },
    refreshPlayerState (id, status) {
      const targetElement = document.querySelector(`#${id} div.jw-media`)
      if (!targetElement) return
      if (status === 'normal') {
        this.removeClassesInTarget(targetElement, ['warning-state', 'alarm-state'])
      }
      if (status === 'warning') {
        this.addClassesInTarget(targetElement, ['warning-state'])
        this.removeClassesInTarget(targetElement, ['alarm-state'])
      }
      if (status === 'alarm') {
        this.removeClassesInTarget(targetElement, ['warning-state'])
        this.addClassesInTarget(targetElement, ['alarm-state'])
      }
    },
    addClassesInTarget (target, classes) {
      classes.forEach(className => {
        target.classList.add(className)
      })
    },
    removeClassesInTarget (target, classes) {
      classes.forEach(className => {
        target.classList.remove(className)
      })
    }
  }
}
</script>

<style lang="stylus">
</style>
